<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate</title>
    <style>
        .rect {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="qc.min.js"></script>
</head>
<body>
<div q-view="myview">
    <div q-visible="{show}" q-animate="testAnimate" class="rect"></div>
    <input q-click="veAnimate" type="button" value="click">
    <br>
    <ul q-each="list">
        <li q-animate="testAnimate"><span q-text="{text}"></span></li>
    </ul>
    <input q-click="add" type="button" value="add">
    <input q-click="remove" type="button" value="remove">
</div>
</body>
</html>
<script>
    /*
    *
     *1.这里需要引用jquery模块，因为动画demo是基于jquery做的为代码简介
     * 2.系统内置动画是不需要jquery的
    * */
    /*//自定义动画 这里action 有两个值
     *action 为enter 显示状态的动画 leave隐藏状态的动画
     * run 在action为leave的时候 执行完动画要调用callback
     * */
    qc.animate.testAnimate = function (action, run) {
        if (action == "enter") {
            $(this).hide();
            $(this).slideDown();
        } else if (action == "leave") {
            $(this).slideUp(function () {
                run();
            })
        }
    }
    qc.view("myview", function (vm, ve) {
        vm.show = true;
        vm.list = [{text: "test" + qc.getRandom()}];
        ve.veAnimate = function () {
            vm.setValue("show", !vm.show);
        }
        ve.add = function () {
            //vm.listpush({text: "test" + qc.getRandom()})
            vm.listconcat([{text: "test" + qc.getRandom()}, {text: "test" + qc.getRandom()}])
            //vm.listunshift({text: "test" + qc.getRandom()});
        }
        ve.remove = function () {
            vm.listsplice(0, 1);
            //vm.listpop();
            //vm.listshift()
        }
    })
</script>